<template>
    <div style="overflow: hidden;background-color: #fff;height: 100vh;width: 100vw;">
      <div class="video_title">
        <van-icon name="arrow-left" class="icon" @click="goBack" />
        <p>附件下载</p>
      </div>
      <div>
        <div class="item" style="background-color: #ddd;"> 
            <p>
                附件名称
            </p>
            <div>操作</div>
        </div>
        <div style="height: calc(100vh - 43.5px - 44px);overflow-y: auto;overflow-x: hidden;">
            <div class="item border" v-for="item,index in list" :key="index">
                <p>{{ item.lebel }}</p>
                <div>
                    <van-button
                    type="info"
                    size="small"
                    style="background: rgb(249, 151, 56);border: none;"
                    @click="downloadFile(item)"
                    >下载</van-button
                    >
                </div>
            </div>
        </div>
      </div>
      <div style="position: relative; top: 0; left: 0; z-index:-10;width: 100%;">
        <exports :listData="userInfo"></exports>
      </div>
      <!-- 微信中打开 -->
        <van-popup v-model="TCshow" :style="{ height: '30%' }">
            <span
                @click="copy"
                style="
                display: flex;
                width: 100%;
                height: 100%;
                justify-content: center;
                align-items: center;
                font-size: 1rem;
                color: #f00;
                "
            >
                点击复制该链接在外部浏览器中打开
            </span>
        </van-popup>
        <van-popup
            v-model="TCshowImg"
            :style="{  width: '100%',height:'100%',backgroundColor:'#eee', }"
            :closeable="true"
            position="bottom"
            >
            <span
                style="
                font-size: 0.8rem;
                color: #f00;
                position: absolute;
                top: 10px;
                left: 5%;
                "
                >长按图片保存</span
            >
            <img style="width: 100%;position:relative;top:10%;z-index:1000000;" :src="downloadURL" alt="" />
        </van-popup>
    </div>
  </template>
<script>
import exports from '@/components/exports.vue';
import { downImg } from "@/utils/downloadImg.js";
import { download } from "@/api/download.js";
import {
  getGZ,
} from "@/utils/auth.js";
export default {
    components:{exports},
    data () {
        return {
            list:[],
            userInfo:{},
            TCshow:false,
            TCshowImg:false,
            downloadURL:'',
            http:process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_API : window.location.href.slice(0, window.location.href.indexOf('/user')),
        }
    },
    created () {
        if(this.http.includes('hongjing')){
            if(getGZ()=='特种作业'){
                this.list=[
                    {
                        lebel:'情况说明',
                        url:'https://hongjing.taijieyun.com/storage/userimage/hongjing/20230417/dcc872202e0b4612c220273753245f7a.pdf',
                    },
                    {
                        lebel:'申请表',
                        url:'',
                        domId:'model_a',
                    },
                ]
            }else if(getGZ()=='安全管理'){
                this.list=[
                    {
                        lebel:'工作证明',
                        url:'https://hongjing.taijieyun.com/storage/userimage/hongjing/20230417/7bc54e6b1241378603b446d7c31cca79.pdf',
                    },
                    {
                        lebel:'申请表',
                        url:'',
                        domId:'model_b',
                    },
                ]
            }
        }
        this.userInfo=JSON.parse(this.$route.query.list)
    },
    methods: {
        goBack(){
            this.$router.go(-1)
        },
        downloadFile(data){
            if(data.url){
                let MicroMessenger = navigator.userAgent.match(/MicroMessenger/i);
                if (MicroMessenger) {
                    this.TCshow = true;
                    this.downloadURL = data.url;
                } else {
                    download(data.url, data.lebel);
                }
            }else{
                this.$nextTick(() => {
                    downImg(data.lebel, data.domId).then((res) => {
                        this.TCshowImg = true;
                        this.downloadURL = res;
                    });
                });
            }
        },
        copy() {
            let url = this.downloadURL;
            let oInput = document.createElement("input");
            oInput.value = url;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象;
            document.execCommand("Copy"); // 执行浏览器复制命令
            this.$toast.success("复制成功");
            oInput.remove();
        },
    }
}
</script>

<style lang="scss" scoped>
p{
    margin: 0;
}
.video_title {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: #327bff;
  color: #fff;
  height: 2.75rem;
   
  p {
    margin: 0;
    width: calc(100vw - 64px);
    display: flex;
    justify-content: center;
  }
  .icon {
    font-size: 1.25rem;
  }
}
.item{
    display: flex;align-items: center;justify-content: space-between;padding: 12px 24px;
    p{
        flex: 2;
        text-align: center;
    }
    div{
        flex: 1;
        text-align: center; 
    }
}
.border{
    border-bottom: 1px solid #ccc;
}
</style>